<template>
  <div>
    <sui-container text-align="center" style="padding: 50px">
      <h2 is="sui-header">主页</h2>
      <sui-divider/>
      <a
        v-for="item in name"
        :key="item"
        primary
        :href=getUrl(item)
        is="sui-button"
        :content="item"
        @click="getUrl(item)"
        style="width: 100px; margin: 10px"
      />
    </sui-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: [
        'Button', 'Input', 'Step', 'Reveal', 'Loader',
        'Message', 'Table', 'Form', 'Menu', 'Card', 'Comment',
        'Feed', 'Item', 'Statistic', 'Container', 'Grid', 'Accordion',
        'Dimmer', 'Modal', 'Rating', 'Dropdown', 'Progress', 'Popup',
        'Sidebar', 'Tab'
      ]
    }
  },
  methods: {
    getUrl (name) {
      return 'http://localhost:8080/?#/' + name.toLowerCase()
    }
  }
}
</script>

<style scoped>

</style>
